<template>
    <a-layout>
        <a-layout-header class="header">
            <div class="logo" />
            <a-menu theme="dark" mode="horizontal" v-model:selectedKeys="selectedKeys1" :style="{ lineHeight: '64px' }">
                <a-menu-item key="/">
                    <router-link to="/">首页</router-link>
                </a-menu-item>
                <a-menu-item key="/admin/ebook">
                    <router-link to="/admin/ebook">电子书管理</router-link>
                </a-menu-item>
                <a-menu-item key="/admin/category">
                    <router-link to="/admin/category">分类管理</router-link>
                </a-menu-item>
                <a-menu-item key="/admin/user">
                    <router-link to="/admin/user">用户管理</router-link>
                </a-menu-item>
                <a-menu-item key="/about">
                    <router-link to="/about">关于我们</router-link>
                </a-menu-item>
                <a-menu-item key="login" style="margin-left: auto">
                    <a @click="showLoginModal">登录</a>
                </a-menu-item>
            </a-menu>
            <a-modal title="登录" v-model:visible="loginModalVisible" :confirm-loading="loginModalLoading" @ok="login">
                <a-form :model="loginUser" :label-col="{ span: 6 }" :wrapper-col="{
                    span: 18
                }">
                    <a-form-item label="登录名">
                        <a-input v-model:value="loginUser.loginName" />
                    </a-form-item>
                    <a-form-item label="密码">
                        <a-input v-model:value="loginUser.password" type="password" />
                    </a-form-item>
                </a-form>
            </a-modal>
        </a-layout-header>
    </a-layout>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';
import { message } from 'ant-design-vue';

declare let hexMd5: any;
declare let KEY: any;

export default defineComponent({
    name: 'the-header',
    setup() {
        const user = ref();
        user.value = {};

        // 用来登录
        const loginUser = ref({
            loginName: "test",
            password: "test"
        });
        const loginModalVisible = ref(false);
        const loginModalLoading = ref(false);
        const showLoginModal = () => {
            loginModalVisible.value = true;
        };
        //登录
        const login = () => {
            console.log("开始登录");
            loginModalLoading.value = true;
            loginUser.value.password = hexMd5(loginUser.value.password + KEY);
            axios.post('/user/userLogin', loginUser.value).then((response) => {
                loginModalLoading.value = false;
                const data = response.data;
                if (data.success) {
                    loginModalVisible.value = false;
                    message.success("登录成功！");
                    user.value = data.content;
                } else {
                    message.error(data.message);
                }
            });
        };
        return {
            loginModalVisible,
            loginModalLoading,
            showLoginModal,
            loginUser,
            login,
        }
    }
});
</script>